<template>
    <div class="x1">

        <el-container style="height: 100%; margin: 0;padding: 0;">
            <el-header class="tou1">
                <div>
                
                    <i :class="this.$router.options.routes[3].children[1]. meta.icon"></i>
                    <p>系管理</p>
                </div>
            </el-header>
            <el-main class="shen1">
                <div style="display: flex;">
                    <div>
                        <template>
                            <el-button type="button" @click="open" style="width: 100px ;height: 35px;">点击打开 </el-button>
                        </template>
                    </div>
                    <div style="display: flex; justify-content: flex-end;margin-left:20px">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                        <button
                            style="height: 40px;width:  60px;background-color:#409eff ; margin-left:20px ;">搜索</button>
                    </div>
                </div>
                <div>
                    <template>
                        <h1>欢迎来到管理员首页</h1>
                    </template>
                </div>
            </el-main>
            <el-footer class="jiao1">
                <div class="block">
  <span class="demonstration"></span>
  <el-pagination
    layout="prev, pager, next"
    :total="1000">
  </el-pagination>
</div>
            </el-footer>
        </el-container>
    </div>

</template>
<script>

export default {
   
    data() {
        
        return {
            input: '',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }]
        }
    },
    methods: {
        open() {
            const h = this.$createElement;
            this.$msgbox({
                title: '消息',
                message: h('p', null, [
                    h('span', null, '内容可以是 '),
                    h('i', { style: 'color: teal' }, 'VNode')
                ]),
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        setTimeout(() => {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 300);
                        }, 3000);
                    } else {
                        done();
                    }
                }
            }).then(action => {
                this.$message({
                    type: 'info',
                    message: 'action: ' + action
                });
            });
        },
        
    },
    mounted() {
        console.log(this.$router.options.routes[3].children);
        
    },
}
</script>
<style lang="scss">
html,
body,
.x1 {

    height: 100%;

    margin: 0;

    padding: 0;

}

.el-header,
.el-main,
.el-footer {
    width: 100%;
    margin: 0;

    padding: 0; // 如果你想完全移除内边距，可以这样设置

    // 如果只是想要调整内边距，可以指定具体的值，例如：

    // padding: 10px;
    
}
.block{
  justify-items: center;
}
</style>